<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .d1,.d2,.d3,.d4{
            border: 1px solid #ccc;
        }
        .d1{
            width: 200px;
            height: 200px;
        }
        .d2{
            width: 150px;
            height: 150px;
        }
        .d3{
            width: 100px;
            height: 100px;
        }
        .d4{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" @keyup="show($event)"> <br>
        <input type="text" @keyup.13="show($event)"> <br>
        <input type="text" @keyup.enter="show($event)"> <br>
        <input type="text" @keyup.right="show($event)"> <br>
        <!-- 同时按ctrl+c -->
        <input type="text" @keyup.ctrl.c="show($event)"> <br>
        <hr>

        <!-- 
            事件冒泡、事件捕获
         -->
        <div class="d1" @click.capture="print('div1')">div1
            <div class="d2" @click.capture.stop.self="print('div2')">div2
                <div class="d3" @click.capture="print('div3')">div3
                    <div class="d4" @click.capture="print('div4')">div4</div>
                </div>
            </div>
        </div>
        <hr>

        <!-- 
            事件委托/事件代理
                1.减少事件注册，降低内存占用
                2.新增元素时实现动态绑定事件
         -->
        <ul @click.capture.stop="doLi($event)">
            <!-- <li @click="doLi($event)">li1</li>
            <li @click="doLi($event)">li2</li>
            <li @click="doLi($event)">li3</li>
            <li @click="doLi($event)">li4</li>
            <li @click="doLi($event)">li5</li> -->
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
            <li>li5</li>
        </ul>
        <button>动态添加li</button>

        <hr>
        <!-- 
            阻止事件的默认行为
         -->
        <a href="#" @click.prevent="show">hello</a>

        <button @contextmenu.prevent.once="show">哈哈哈哈</button>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            
        },
        methods:{
            show(e){
                // if(e.keyCode==13){
                    //     console.log('按回车。。。')
                // }

                console.log('。。。')
            },
            print(name){
                console.log(name)
            },
            doLi(e){
                console.log(e.target.innerText)
            }
        }
    })
</script>
</html>